<template>
  <div>
    <TypeNav />
    <div class="detail">
      <!-- 主要内容区域 -->
      <section class="con">
        <!-- 导航路径区域 -->
        <div class="conPoin">
          <span v-if="categoryView.category1Name">{{
            categoryView.category1Name
          }}</span>
          <span v-if="categoryView.category2Name">{{
            categoryView.category2Name
          }}</span>
          <span v-if="categoryView.category3Name">{{
            categoryView.category3Name
          }}</span>
        </div>
        <!-- 主要内容区域 -->
        <div class="mainCon">
          <!-- 左侧放大镜区域 -->
          <div class="previewWrap">
            <!--放大镜效果-->
            <Zoom :skuImageList="sukImg" />
            <!-- 小图列表 -->
            <ImageList :skuImageList="sukImg" />
          </div>
          <!-- 右侧选择区域布局 -->
          <div class="InfoWrap">
            <div class="goodsDetail">
              <h3 class="InfoName">
                {{ skuInfo.skuName }}
              </h3>
              <p class="news">
                {{ skuInfo.skuDesc }}
              </p>
              <div class="priceArea">
                <div class="priceArea1">
                  <div class="title">
                    价&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;格
                  </div>
                  <div class="price">
                    <i>¥</i>
                    <em>{{ skuInfo.price }}</em>
                    <span>降价通知</span>
                  </div>
                </div>
              </div>
            </div>

            <div class="choose">
              <div class="chooseArea">
                <div class="choosed"></div>
                <dl v-for="item in spuSaleAttrList" :key="item.id">
                  <dt class="title">{{ item.saleAttrName }}</dt>
                  <dd
                    changepirce="0"
                    :class="{ active: item2.isChecked === '1' }"
                    v-for="item2 in item.spuSaleAttrValueList"
                    :key="item2.id"
                    @click="chnage(item, item2)"
                  >
                    {{ item2.saleAttrValueName }}
                  </dd>
                </dl>
              </div>
              <div class="cartWrap">
                <div class="controls">
                  <input
                    autocomplete="off"
                    class="itxt"
                    v-model.number="skuNum"
                    @change="changeInput"
                  />
                  <a href="javascript:" class="plus" @click="skuNum++">+</a>
                  <a
                    href="javascript:"
                    class="mins"
                    @click="skuNum > 1 ? skuNum-- : (skuNum = 1)"
                    >-</a
                  >
                </div>
                <div class="add" @click="add">
                  <a href="javascript:">加入购物车</a>
                </div>
              </div>
            </div>
          </div>
        </div>
      </section>
    </div>
  </div>
</template>

<script>
import { mapGetters } from "vuex";
import ImageList from "./ImageList/ImageList";
import Zoom from "./Zoom/Zoom";
export default {
  name: "detail",
  components: {
    ImageList,
    Zoom,
  },
  computed: {
    ...mapGetters(["categoryView", "skuInfo", "spuSaleAttrList"]),
    sukImg() {
      //避免找不到元素而导致子组件报错
      return this.skuInfo.skuImageList || [];
    },
  },
  data() {
    return {
      //购买产品的个数
      skuNum: 1,
    };
  },
  created() {
    this.$store.dispatch("getItem", this.$route.params.skuid);
  },
  methods: {
    chnage(a, b) {
      //先把所有的都变成未选中状态
      a.spuSaleAttrValueList.map((item) => {
        item.isChecked = "0";
      });
      //然后再单独把点击的变成选中状态
      b.isChecked = "1";
    },
    changeInput(e) {
      if (isNaN(e.target._value) === true || this.skuNum < 1) {
        alert("非法输入");
        this.skuNum = 1;
      } else {
        this.skuNum = parseInt(e.target._value);
      }
    },
    async add() {
      //通过Promise直接拿vuex中返回的值
      try {
        //返回的是Promise
        await this.$store.dispatch("addToCart", {
          skuID: this.$route.params.skuid,
          skuNum: this.skuNum,
        });
        //转字符串存入会话存储
        sessionStorage.setItem("skuInfo", JSON.stringify(this.skuInfo));
        this.$router.push({
          name: "AddCartSuccess",
          query: { skuNum: this.skuNum },
        });
      } catch (error) {
        alert(error.message);
      }
    },
  },
};
</script>

<style lang="less" scoped>
.detail {
  .con {
    width: 1200px;
    margin: 15px auto 0;

    .conPoin {
      padding: 9px 15px 9px 0;

      & > span + span:before {
        content: "/\00a0";
        padding: 0 5px;
        color: #ccc;
      }
    }

    .mainCon {
      overflow: hidden;
      margin: 5px 0 15px;

      .previewWrap {
        float: left;
        width: 400px;
        position: relative;
      }

      .InfoWrap {
        width: 700px;
        float: right;

        .InfoName {
          font-size: 14px;
          line-height: 21px;
          margin-top: 15px;
        }

        .news {
          color: #e12228;
          margin-top: 15px;
        }

        .priceArea {
          background: #fee9eb;
          padding: 7px;
          margin: 13px 0;

          .priceArea1 {
            overflow: hidden;
            line-height: 28px;
            margin-top: 10px;

            .title {
              float: left;
              margin-right: 15px;
            }

            .price {
              float: left;
              color: #c81623;

              i {
                font-size: 16px;
              }

              em {
                font-size: 24px;
                font-weight: 700;
              }

              span {
                font-size: 12px;
              }
            }

            .remark {
              float: right;
            }
          }

          .priceArea2 {
            overflow: hidden;
            line-height: 28px;
            margin-top: 10px;

            .title {
              margin-right: 15px;
              float: left;
            }

            .fixWidth {
              width: 520px;
              float: left;

              .red-bg {
                background: #c81623;
                color: #fff;
                padding: 3px;
              }

              .t-gray {
                color: #999;
              }
            }
          }
        }

        .support {
          border-bottom: 1px solid #ededed;
          padding-bottom: 5px;

          .supportArea {
            overflow: hidden;
            line-height: 28px;
            margin-top: 10px;

            .title {
              margin-right: 15px;
              float: left;
            }

            .fixWidth {
              width: 520px;
              float: left;
              color: #999;
            }
          }
        }

        .choose {
          .chooseArea {
            overflow: hidden;
            line-height: 28px;
            margin-top: 10px;

            dl {
              overflow: hidden;
              margin: 13px 0;

              dt {
                margin-right: 15px;
                float: left;
              }

              dd {
                float: left;
                color: #666;
                line-height: 24px;
                padding: 2px 14px;
                border-top: 1px solid #eee;
                border-right: 1px solid #bbb;
                border-bottom: 1px solid #bbb;
                border-left: 1px solid #eee;
                margin-left: 10px;
                &.active {
                  color: green;
                  border: 1px solid green;
                }
              }
            }
          }

          .cartWrap {
            .controls {
              width: 48px;
              position: relative;
              float: left;
              margin-right: 15px;

              .itxt {
                width: 38px;
                height: 33px;
                border: 1px solid #ddd;
                color: #555;
                float: left;
                border-right: 0;
                text-align: center;
                outline-color: transparent;
              }

              .plus,
              .mins {
                width: 15px;
                text-align: center;
                height: 17px;
                line-height: 17px;
                background: #f1f1f1;
                color: #666;
                position: absolute;
                right: -8px;
                border: 1px solid #ccc;
              }

              .mins {
                right: -8px;
                top: 19px;
                border-top: 0;
              }

              .plus {
                right: -8px;
              }
            }

            .add {
              float: left;

              a {
                background-color: #e1251b;
                padding: 0 25px;
                font-size: 16px;
                color: #fff;
                height: 36px;
                line-height: 36px;
                display: block;
              }
            }
          }
        }
      }
    }
  }
}
</style>